<!--
 * @Descripttion: 
 * @version: 根据elementUI样式增加季度选择器
 * @Author: 尹伊
 * @Date: 2021-11-24 11:20:39
 * @LastEditors: 尹伊
 * @LastEditTime:  2021-11-24 11:20:39
-->
<template>
  <div class="block">
    <div>
      <span>
        <el-input @focus="showsixMonth" prefix-icon="el-icon-date" v-model="halfYearMonth" clearable placeholder="请选择"
          style="width: 13.75rem;">
        </el-input>
      </span>
      <li class="show6" v-show="showTimehalfYear">
        <p class="show6P"> <span>
            <button type="button" aria-label="前一年"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
          </span>
          <span role="button" class="span-year">{{year}}年</span>
          <span>
            <button type="button" aria-label="后一年" @click="next"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
          </span>
        </p>
        <div class="selectMonth">
          <p v-for="(item,index) in fullMonth" @click.stop="choseHalfYear(item)">{{item}}</p>
        </div>
      </li>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: '',
        dataType: 'year',
        year: new Date().getFullYear(),
        fullMonth: ["1季度", '2季度', '3季度', '4季度'],
        status: '',
        //半年
        halfYearMonth: "",
        showTimehalfYear: false,
      }
    },

    methods: {
      prev() {
        this.year = this.year * 1 - 1
      },
      next() {
        this.year = this.year * 1 + 1
      },
      showsixMonth() {
        this.showTimehalfYear = !this.showTimehalfYear
      },
      hiddenSixMonth() {
        this.showTimehalfYear = false
      },
      choseHalfYear(v) {
        console.log(v)
        this.halfYearMonth = this.year + '-' + v
        this.showTimehalfYear = false
      },
      blurQuarter() {
        this.showTimehalfYear = false
      }
    }
  }
</script>

<style scoped lang="scss">
  .show6 {
    width: 322px;
    margin-top: 5px;
    position: absolute;
    z-index: 2;
    /* height: 272px; */
    height: 128px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    list-style: none;
  }

  .show6P {
    width: 100%;
    height: 43px;
    line-height: 43px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
  }


  .show6:nth-child(1) span {
    display: inline-block;
    height: 100%;
    line-height: 43px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .selectMonth {
    width: 100%;
    height: 14.3125rem;
    display: flex;
    flex-flow: wrap;
  }

  .selectMonth p {
    width: 25%;
    height: 25%;
    text-align: center;
    line-height: 4rem;
  }

  .selectMonth p:hover {
    background: rgba(19, 131, 255, 0.052);
    cursor: pointer;
  }

  .span-year {
    width: 90%;
    margin: 0 auto;
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 40px;
    &:hover{
      color: #0080FF;
      cursor: pointer;
    }
  }

  .el-input {
    width: 215px;
    height: 38px;
    display: inline-block;
  }
</style>